<template>
  <div>
    <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;"  :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row>
        <a-col>
          <a-form-item label="个人照片" >
            <j-image-upload  v-decorator="['professorPhotoString']" :disabled="isNotChangeInfo" ></j-image-upload>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <div>
            <a-form-item label="申请表照片">
              <j-image-upload  v-decorator="['professorInfoPhotoString']" :disabled="isNotChangeInfo"></j-image-upload>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <div>
            <a-form-item label="身份证复印件">
              <j-image-upload v-decorator="['professorIdString']"  :disabled="isNotChangeInfo"></j-image-upload>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <div>
            <a-form-item label="个人承诺书">
              <j-image-upload v-decorator="['professorCommitmentString']" :disabled="isNotChangeInfo"></j-image-upload>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <div>
            <a-form-item label="个人工作简历">
              <j-image-upload multiple isMultiple showUploadList  v-decorator="['professorResumeString']" :disabled="isNotChangeInfo"></j-image-upload>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <!--          <a-col :span="6" style="position: absolute; left: 75% ">-->
          <div>
            <a-form-item label="学历、学位证书复印件">
              <j-image-upload multiple isMultiple showUploadList  v-decorator="['professorDegreeImageString']" :disabled="isNotChangeInfo"></j-image-upload>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <div>
            <a-form-item label="专业资格职业证书复印件">
              <j-image-upload multiple isMultiple showUploadList  v-decorator="['professorQualificationString']" :disabled="isNotChangeInfo"></j-image-upload>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <div>
            <a-form-item label="其他证明专业能力的材料">
              <j-image-upload multiple isMultiple showUploadList  v-decorator="['professorOtherString']" :disabled="isNotChangeInfo"></j-image-upload>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <a-form-item :wrapperCol="{span: 19, offset: 5}">
        <div style="display: flex;justify-content: space-between;align-content: center">
          <div>
            <a-button type="primary"   @click="exportPDF" style="margin-left: 10px">下载后打印</a-button>
            <a-modal okText="预览我的PDF" :visible="geturl.show" title="温馨提示" @ok="handleOkkk1" @cancel="handleOkkk">
              <p>由于IOS系统不允许跳转浏览器下载文件，麻烦您将下面的链接复制张贴到浏览器下载pdf文件</p>
              <p>{{geturl.url}}</p>
            </a-modal>
          </div>
          <!--        <div style="width: 5%;">
                    <div v-if="toggleSearchStatus" style="float: left">
                      <a-button>按钮</a-button>
                    </div>
                    &lt;!&ndash;控制显示的按钮&ndash;&gt;
                    <a-button type="primary" style="margin-left: 8px;float: left" @click="changeButtonStatus">
                      <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
                    </a-button>
                  </div>-->
            <div v-if="!isNotChangeInfo">
              <a-button type="primary" @click="handleOk"  :disabled="isdisabledF"  style="margin-left: 28px">提交</a-button>
              <a-modal
                :closable="false"
                :visible="isShow"
                title="温馨提示"
              >
                <p>{{ modalText }}</p>
                <template slot="footer">
                  <a-button @click="handleOkss" style="background-color: #93adff;color: white">关闭</a-button>
                </template>
              </a-modal>
            </div>
          <div v-if="isNotChangeInfo" style="float: left;">
            <div v-if="status!='专家入库申请待审核'">
              <QRcode :status="status"></QRcode>
            </div>
          </div>
          <a-button type="primary" style="margin-top: 5px" @click="prevStep">上一页</a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import JDate from '@/components/jeecg/JDate'
import JCategorySelect from '@/components/jeecg/JCategorySelect'
import JTreeSelect from '@/components/jeecg/JTreeSelect'
import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
import ATextarea from "ant-design-vue/es/input/TextArea";
import {postAction} from '@/api/manage';
import { httpAction } from '@/api/manage'
import {downloadFile} from '@/api/manage'
// 导入
import {getAction} from '@/api/manage'
import JImageUpload from '@/components/jeecg/JImageUpload'
import ACol from "ant-design-vue/es/grid/Col";
import QRcode from "../modules/QRcode"
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  name: "Step3",
  components: {
    QRcode,
    ACol,
    ATextarea,
    JAreaLinkage,
    JImageUpload,
    JCategorySelect,
    JDate,
    JTreeSelect,
    downloadFile
  },
  data () {
    return {
      modalText:"您的信息已受理，请等待审核结果，届时会有短信提示!",
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      toggleSearchStatus:0,
      isdisabledF:false,
      marjorId:"",
      clickCount:0,
      form:this.$form.createForm(this),
      schoolId:"",
      imageUrl: '',
      fieldvalue:{
        professorPhotoString:'',
        professorInfoPhotoString:'',
        professorIdString:'',
        professorCommitmentString:'',
        professorResumeString:'',
        professorDegreeImageString:'',
        professorQualificationString:'',
        professorOtherString:'',
      },
    }
  },
  props:{
    status:{
      default:'',
      type: String
    },
    tes:{
      default:{},
      type: Object
    },
    geturl:{
      default:{
        url:'',
        show:false,
      },
      type:Object,
    },
    isNotChangeInfo:{
      default:0,
      type: Boolean
    },
    isShow:{
      default:false,
      type: Boolean
    }
  },
  created(){
    this.selectisdiabaled();
  },
  mounted(){
    this.form.setFieldsValue({
      professorPhotoString:this.tes.professorPhotoString,
      professorInfoPhotoString:this.tes.professorInfoPhotoString,
      professorIdString:this.tes.professorIdString,
      professorCommitmentString:this.tes.professorCommitmentString,
      professorResumeString:this.tes.professorResumeString,
      professorDegreeImageString:this.tes.professorDegreeImageString,
      professorQualificationString:this.tes.professorQualificationString,
      professorOtherString:this.tes.professorOtherString,
    });
  },
  methods: {
    handleOkss(){
      location.reload();
      this.isShow=false;
    },
    handleOkkk1(e){
      console.log(e);
      this.geturl.show=false;
      let a = document.createElement('a') //创建a标签
      a.href = window._CONFIG['domianURL']+url
      a.click()
    },
    handleOkkk(e){
      console.log(e);
      this.geturl.show=false;
    },
    exportPDF(){
      this.$emit('ExportPDF2');
    },
    changeButtonStatus(){
      if (this.toggleSearchStatus==0){
        this.toggleSearchStatus = 1;
      }else if (this.toggleSearchStatus==1){
        this.toggleSearchStatus = 0;
      }
    },
    selectisdiabaled(){
      getAction("/temporary/diyTemporaryApplicantInfo/selectIsdisabledByuserid").then((res) => {
        if(res.result!=1){
          this.clickCount=2;
          return this.isdisabledF=true;
        }
      })
    },
    getfieldvalue(){
      const that = this;
      this.form.validateFields((err, values) => {
        // 获取表单中type的id
        this.fieldvalue.professorPhotoString = that.form.getFieldValue("professorPhotoString");
        this.fieldvalue.professorInfoPhotoString = that.form.getFieldValue("professorInfoPhotoString");
        this.fieldvalue.professorIdString = that.form.getFieldValue("professorIdString");
        this.fieldvalue.professorCommitmentString = that.form.getFieldValue("professorCommitmentString");
        this.fieldvalue.professorResumeString = that.form.getFieldValue("professorResumeString");
        this.fieldvalue.professorDegreeImageString = that.form.getFieldValue("professorDegreeImageString");
        this.fieldvalue.professorQualificationString = that.form.getFieldValue("professorQualificationString");
        this.fieldvalue.professorOtherString = that.form.getFieldValue("professorOtherString");
        console.log("wangyueniao2")
        console.log(that.form.getFieldValue("professorPhotoString"));
        console.log(this.fieldvalue);
      })
    },
    handleOk(){
      if(this.clickCount==0){
        this.isdisabledF=true;
        setTimeout(()=>{
          //30s之内只能点击一次
          this.isdisabledF=false;
        },30000)
      }
      this.getfieldvalue();
      console.log("进入子组件提交");
      this.$emit('setfiled2',this.fieldvalue);
      console.log(this.fieldvalue)
      this.$emit('HandleOk');
    },
    prevStep () {
      this.getfieldvalue();
      this.$emit('prevStep')
      this.$emit('setfiled2',this.fieldvalue);
    },
  }
}
</script>
<style lang="less" scoped>
.information {
  line-height: 22px;

  .ant-row:not(:last-child) {
    margin-bottom: 24px;
  }
}
.money {
  font-family: "Helvetica Neue",sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 14px;
}
</style>
<style>
.ant-col-offset-5{
  margin-left: 0%;
  width: 100% !important;
}
</style>